<template>
  <!-- 法务-下拉框查询 -->
  <a-select v-bind="$attrs" v-on="$listeners" :placeholder="placeholder" v-model="currentValue" allowClear>
    <a-icon v-if="fetching" style="color:#096dd9;" slot="suffixIcon" type="loading" />
    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
    <a-select-option v-for="i in list" :key="i.id" :value="i.id">{{ i.name }}</a-select-option>
  </a-select>
</template>
<script>
import { getDropDown } from '@/api/dropDown'

export default {
  name: 'SelectorByLegal',
  data() {
    return {
      fetching: false,
      list: [],
    }
  },
  props: {
    // v-model绑定的数据
    value: {
      type: [Array, String, Object],
    },
    // 1：分包选择方式,2：合同类型,3：合同文本；4：补充协议类型
    selectType: {
      type: [String, Number],
      default: function () {
        return '0'
      },
    },
    attrs: {
      type: [Object],
    },
    // placeholder
    placeholder: {
      type: String,
      default: function () {
        return '请选择'
      },
    },
  },
  computed: {
    // 转换绑定的选中数据，与v-model同步
    currentValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
        this.$emit(
          'update:option',
          this.list.find((item) => item.id === value)
        )
        this.$emit(
          'getOption',
          this.list.find((item) => item.id === value)
        )
      },
    },
  },
  mounted() {
    // 获取下拉框列表
    this.fetching = true
    let args = { type: this.selectType }
    if (this.attrs && Object.keys(this.attrs)?.length > 0) {
      Object.assign(args, this.attrs)
    }
    getDropDown(args)
      .then((res) => {
        this.fetching = false
        if (res.code == 200) {
          this.list = res.data
        }
      })
      .catch((res) => {
        this.fetching = true
      })
  },
}
</script>
